<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="Script.js"></script>
</head>
<body>


    <div id="catbox">
        <table id="cartTable" border="1">
            <thead>
            <tr>
                <th>
                    <label><input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label>
                </th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="on">
                <td class="checkbox">
                    <label><input class="check" type="checkbox"/>&nbsp;&nbsp;1</label>
                </td>
                <td class="name">
                    <a href="#">键盘</a>
                </td>
                <td class="price">100</td>
                <td class="count">
                    <div class="reduce">-</div>
                    <input class="count-input" type="text" value="1"/>
                    <div class="add">+</div>
                </td>
                <td class="subtotal">￥100</td>
                <td class="operation">
                    <span class="delete">删除</span>
                </td>
            </tr>
            <tr class="on">
                <td class="checkbox">
                    <label><input class="check" type="checkbox"/>&nbsp;&nbsp;2</label>
                </td>
                <td class="name">
                    <a href="#">显示器</a>
                </td>
                <td class="price">860</td>
                <td class="count">
                    <div class="reduce">-</div>
                    <input class="count-input" type="text" value="1"/>
                    <div class="add">+</div>
                </td>
                <td class="subtotal">￥860</td>
                <td class="operation">
                    <span class="delete">删除</span>
                </td>
            </tr>
            <tr class="on">
                <td class="checkbox">
                    <label><input class="check" type="checkbox"/>&nbsp;&nbsp;3</label>
                </td>
                <td class="name">
                    <a href="#">鼠标</a>
                </td>
                <td class="price">50</td>
                <td class="count">
                    <div class="reduce">-</div>
                    <input class="count-input" type="text" value="1"/>
                    <div class="add">+</div>
                </td>
                <td class="subtotal">￥50</td>
                <td class="operation">
                    <span class="delete">删除</span>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="6">
                    <div class="cart-total "style="display: flex;flex-wrap: wrap;">
                        <p>总计：<span class="total-pull">￥0</span></p>
                        <p>已节省：<span class="saved-price">￥0</span></p>
                        <p>运费：<span class="shipping-fee">￥0</span></p>
                    </div>
                </td>
            </tr>
            </tfoot>
        </table>

    </div>
</body>
</html>